<template>
  <div class="illegalPay">
    <x-header title="违章缴费" :left-options="{backText:''}"></x-header>
    <div class="illegalMess">
        <div class="userMess">
        	<h2>车主信息</h2>
			<div class="userName">
				<label>姓名</label>
				<input type="text" placeholder="请输入姓名" v-model='userName'/>
			</div>
			<div class="userPhone">
				<label>电话</label>
				<input type="text" placeholder="请输入电话号码" v-model='userPhone'/>
			</div>
        </div>
    	<div class="illegalItem">
    	  <h2>可缴费违章</h2>
          <div class="itemsHead">
            <p class="time">{{illegal.CREATE_TIME | filterTimess}}</p>
          </div>
          <h1>{{illegal.SAREA}}</h1>
          <p>{{illegal.SACT}}</p>
          <div class="itemsFooter">
            <div class="itemFL">
              <span>扣 <em>{{illegal.FEN}}分</em></span>
              <span>罚款 <em>{{illegal.ILLEGAL_FEE}}元</em></span>
            </div>
          </div>
        </div>
    </div>
    <div class="rule">
    	<label :class='{on:select}' @click='selectRule'></label><span>我已同意<em @click='showRule'>《服务使用规则》</em></span>
    </div>
    <x-dialog v-model="showDiarule" class="dialog-demo" hide-on-blur show.sync="true">
      <div class="illegalRule">
         <iframe name="" frameborder='0' width="100%" height="230" src="http://carnt.carnettong.com:8088/CARNT/desc/illegal.jsp"></iframe>
         <div class="iKnow" @click='iKnow'>
         	我知道了
         </div>
      </div>
    </x-dialog>
    <div class="totalNeedPay">
  		<span>
  			合计:<span class="bigTotal">{{illegal.TOTAL_FEE}}</span>
  			元[含{{illegal.SERV_FEE}}元的服务费]
  		</span>
  		<div class="btnPay" @click="toPay">
  			立即缴费
  		</div>
  	</div>
  	<toast v-model="showToast" type="text" :text="text"></toast>
  </div>
</template>
<script>
/*违章缴费*/
import {XHeader,XDialog,Toast} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"illegalPay",
  // 数据
  data(){

    return{
    	userId:'',
    	select:true, //是否选择规则
    	illegal:'',//违章信息
    	showDiarule:false, //违章缴费规则弹框
    	userName:'', //用户名
    	userPhone:'', //用户电话
    	text:'', //提示信息
    	showToast:false  //当未输入手机号和名字的弹框
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.illegal=JSON.parse(sessionStorage.getItem('illegalMess'));
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
  	//立即缴费
    toPay(){
    	if(this.userName==''){
    		this.showToast=true;
    		this.text='请输入用户名';
			return;
    	}
    	if(this.userPhone==''){
    		this.showToast=true;
    		this.text='请输入手机号';
			return;
    	}else if(!/^1[3456789]\d{9}$/g.test(this.userPhone)){
    		this.showToast=true;
    		this.text='手机号码不合格';
			return;
    	}
    	let obj={};//请求参数
    	obj.USER_ID=this.userId;
    	obj.VIOLATIONID=this.illegal.VIOLATIONID;//违章id
    	obj.CONTACT=this.userName;
    	obj.MOBILE_PHONE=this.userPhone;
    	obj.CAR_NUMBER=this.illegal.SCAR_NUMBER;
    	this.$fetchPost('/IllegalBaoWeb/createIllegalBill.action',obj).then(res=>{
	        if(res.STATUS_CODE==1){
	        	let objs=res;
	        	objs.allPRICE=this.illegal.TOTAL_FEE;
	        	objs.MOBILE_PHONE=this.userPhone;
	        	objs.CONTACT=this.userName;
            objs.IS_OBD=this.illegal.IS_OBD;
            objs.CAR_BRAND_NAME=this.illegal.CAR_BRAND_NAME;
            objs.CAR_INFO_ID=this.illegal.CAR_INFO_ID;
            sessionStorage.removeItem('orderMess');
            // console.log(JSON.stringify(objs));
            // return;
            localStorage.setItem('from','illegal');//代表支付来自违章
	        	sessionStorage.setItem('payMess',JSON.stringify(objs));
            localStorage.removeItem('fromOrder');//代表支付不是来自订单列表
	        	this.$router.replace('/pay');
	        }
	      },err=>{
	        console.log(err);
	      })
    },
    //规则选择
    selectRule(){
    	this.select=!this.select;
    },
    showRule(){
    	this.showDiarule=true;
    },
    iKnow(){
    	this.showDiarule=false;
    }
  },
  // 子组件
  components:{
    XHeader,XDialog,Toast
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.illegalPay{
   background: #eaeaea;
   min-height: 100%;
   .illegalRule{
   	font-size: 0.05rem;
   	padding: 0.1rem 0.2rem 0.2rem;
   	.iKnow{
   		width: 4rem;
   		height: 0.6rem;
   		font-size: 0.25rem;
   		line-height: 0.6rem;
   		text-align: center;
   		margin: 0.1rem auto 0;
   		background: #ff0000;
   		color: #fff;
   		letter-spacing: 0.03rem;
   		border-radius: 0.15rem;
   	}
   }
   .rule{
   	 display: flex;
   	 margin-top: 0.5rem;
   	 justify-content:center;
   	 align-items:center;
   	 label{
   	 	width: 0.34rem;
   	 	height: 0.34rem;
   	 	display: inline-block;
   	 	background: url(../../assets/image/address/noChecked.png) no-repeat;
   	 	background-size: 0.34rem 0.34rem;
   	 	margin-right: 0.1rem;
   	 }
   	 .on{
   	 	background: url(../../assets/image/address/checked.png) no-repeat;
   	 	background-size: 0.34rem 0.34rem;
   	 }
   	 span{
   	 	font-size: 0.26rem; 
   	 	em{
   	 		font-style: normal;
   	 		color: #e42e3d;
   	 	}
   	 }
   }
   h2{
	height: 0.7rem;
	line-height: 0.7rem;
	background: #eaeaea;
	padding-left: 0.2rem;
	font-size: 0.26rem;
	text-align: left;
	color: #7d7c7c;
   }
   .userMess{
   	text-align: left;
   	font-weight: bolder;
   	.userName{
   	 	background: #fff;
		padding-left: 0.2rem;
		display: flex;
		height: 0.9rem;
		.borderBFu(#ececec);
   	}
   	.userPhone{
		background: #fff;
		padding-left: 0.2rem;
		display: flex;
		height: 0.9rem;
   	}
   	label{
 		font-size: 0.26rem;
 		line-height: 0.9rem;
 		color: #8c8b8b;
 	}
 	input{
		border:0;
		text-indent: 0.4rem;
		font-size: 0.28rem;
		color: #070707;
		outline: medium;
		width: 80%;
 	}
   }
  .illegalItem{
    background: #fff;
    padding-bottom: 0.2rem;
    .itemsHead{
      display: flex;
      padding: 0 0.2rem;
      justify-content: space-between;
      p{
        font-size: 0.22rem;
        color:#ff0000;
        padding: 0.4rem 0 0.3rem 0;
        img{
          width:0.32rem;
          height:0.32rem;
          margin-right: 0.2rem;
          vertical-align: middle;
        }
      }
      .handle{
        color: #5fc6e9;
      }
      .time{
        font-size: 0.22rem;
        color:#979797;
        padding: 0.42rem 0 0.38rem 0;
      }
    }
    h1{
      font-size: 0.3rem;
      color: #333;
      text-align: left;
      font-weight: bold;
      padding-left: 0.2rem;
      margin:0 0 0.3rem 0;
    }
    p{
      font-size: 0.24rem;
      padding:0 0.2rem;
      color: #a5a5a5;
      text-align: left;
    }
    .itemsFooter{
      display: flex;
      padding: 0 0.2rem;
      justify-content: space-between;
      margin-top: 0.1rem;
      .itemFL{
        line-height: 0.3rem;
        span{
          font-size: 0.22rem;
        }
        em{
          color: #da2531;
          font-size: 0.25rem;
          font-style: normal;
        }
      }
      .handleIllegal{
        font-size: 0.26rem;
        height: 0.64rem;
        line-height: 0.44rem;
        padding: 0.1rem 0.25rem;
        border-radius: 0.3rem;
        border:1px solid #da2531;
        margin-top: 0.1rem;
        color: #da2531;
      }
    }
  }
  /* 底部支付 */
  .totalNeedPay{
		height: 1rem;
		width: 100%;
		z-index: 999;
		line-height: 1rem;
		position: fixed;
		bottom: 0;
		text-align: left;
		background: #2a2a2a;
		color: #fff;
		>span{
			>span{
				color: #ce0d20;
			}
			font-size: .25rem;
			vertical-align: middle;
			padding-left: .2rem;
			.bigTotal{
				font-size: .4rem;
				color: #ff0000;
				padding-left: 0.1rem;
			}

		}
		.btnPay{
			width: 27%;
			height: 100%;
			float: right;
			font-size: .3rem;
			text-align: center;
			background: #dd0e24;
			vertical-align: middle;
			color: #fff;
			letter-spacing: 0.03rem;
		}
	}
}
</style>